<template>
  <div class="input-box">
    <span @click="toList">新增任务</span>
  </div>
  <div class="summary">
    <span>全部任务({{ store.tasklist.length }})</span>
    <span>已完成({{ store.tasklist.length - store.unfinishedCount }})</span>
    <span class="unfinished">未完成({{ store.unfinishedCount }})</span>
  </div>
  <div class="tasklist">
   <div :class="{task:true, unfinished: !item.status }" v-for="(item,index) in tasklist" :key="index">
      <input :checked="item.status" type="checkbox" @click="change(item.id)">
      <span> {{item.name}} </span>
      <span @click="del(item.id)">删除</span>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRouter } from 'vue-router'
var $router=useRouter()
//从对应的store中导入
//添加任务列表../stores/tasklsit
import { useTasklistStore } from "../stores/tasklist";
//调用useTasklistStore方法获取store对象
var store = useTasklistStore();
var inputText = ref("");
//新增任务
var add = () => {
  if(inputText.value){
    store.addTask(inputText.value);
    inputText.value=''
  }
  
};

//删除任务
var { tasklist } = storeToRefs(store);
var change = (id) => {
  store.changeStatus(id);
};
var del = (id) => {
  store.deleteTask(id);
};
var toList=()=>{
  $router.push('/list')
}
</script>

<style scoped>
.input-box span {
  width: 80px;
  height: 50px;
  display: block;
  text-align: center;
  line-height: 50px;
  color: skyblue;
}
.summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.summary span {
  background-color: rgb(33, 146, 216);
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  padding: 0 20px;
}
.summary span.unfinished {
  background-color: red;
}
.tasklist .task{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: rgb(33, 146, 216);
  color: white;
  margin: 10px;
}
.tasklist .task.unfinished{
  background-color: red;
}
</style>